<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="head.jsp"%>

<%
    String id = request.getParameter("id");
			id = id == null ? "create" : id;
%>

<div class="am-cf admin-main">
	<!-- content start -->
	<input type="hidden" id='projectId' value="<%=id%>">
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-cf am-padding am-padding-bottom-0">
				<div class="am-fl am-cf">
					<strong class="am-text-primary am-text-lg">构建项目</strong> / <small>新增业务</small>
				</div>
			</div>
			<hr>


			<div class="am-g">
				<div class="am-form-group am-fr">
					<button type="button" id="id_project_back" class="am-btn am-btn-primary">上一步</button>
					<button type="button" id="id_project_save" class="am-btn am-btn-primary">保存修改</button>
				</div>

				<div class="am-u-sm-12">
					<form class="am-form">
						<table class="am-table am-table-striped am-table-hover table-main">
							<thead>
								<tr>
									<th class="table-title">业务名称</th>
									<th class="table-title">jdbcurl</th>
									<th class="table-title">用户</th>
									<th class="table-title">密码</th>
									<th class="table-author table-id am-hide-sm-only">操作</th>
								</tr>
							</thead>
							<tbody id="id_tb_body">
							</tbody>
						</table>
						<hr>
					</form>
				</div>
			</div>

			<div class="am-g">
				<div class="am-u-sm-12">
					<form class="am-form am-form-horizontal" id="id_from" data-am-validator>
						<fieldset>
							<input type="hidden" id="id_id" value="<%=id%>">
							<div class="am-form-group">
								<label for="dbName" class="am-u-sm-3 am-form-label">业务名称</label>
								<div class="am-u-sm-9">
									<input type="text" id="bizName" required name="业务名称" value="" placeholder="bizName">
								</div>
							</div>
							<div class="am-form-group">
								<label for="schema" class="am-u-sm-3 am-form-label">数据库(主库)</label>
								<div class="am-u-sm-9">
									<select data-am-selected="{dropUp: 1}" id="masterDb">
									</select>
									<button type="button" id="new_db_slaver" class="am-btn am-btn-primary js-modal-open">新增数据库连接</button>
								</div>
							</div>
							<div class="am-form-group">
								<label for="schema" class="am-u-sm-3 am-form-label">数据库(丛库)</label>
								<div class="am-u-sm-9">
									<select data-am-selected="{dropUp: 1}" id="slaverDb">
									</select>
								</div>
							</div>
							<br />

						</fieldset>
					</form>
				</div>
			</div>


			<div class="am-modal am-modal-no-btn" tabindex="-1" id="new-db">
				<div class="am-modal-dialog">
					<div class="am-modal-hd">
						<b>增加数据库配置</b> <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
					</div>

					<form class="am-form am-form-horizontal" id="id_from_db" method="post" data-am-validator>
						<div class="am-modal-bd">
							<div class="am-form-group am-modal-bd">
								<label for="schema" class="am-u-sm-3 am-form-label">数据库连接</label>
								<div class="am-u-sm-9">
									<input type="text" id="dburl" required name="dburl" value="" placeholder="">
								</div>
							</div>

							<div class="am-form-group am-modal-bd">
								<label for="schema" class="am-u-sm-3 am-form-label">用户名</label>
								<div class="am-u-sm-9">
									<input type="text" id="username1" required name="username" value="" placeholder="">
								</div>
							</div>

							<div class="am-form-group am-modal-bd">
								<label for="schema" class="am-u-sm-3 am-form-label">密码</label>
								<div class="am-u-sm-9">
									<input type="text" id="pwd1" required name="pwd" value="" placeholder="">
								</div>
							</div>
					</form>
					<button id="doc-single-toggle_save" type="button" class="am-btn am-btn-primary">保存</button>
					<button type="button" class="am-btn am-btn-primary" id="id_db_close" data-am-modal-close>取消</button>

				</div>
			</div>

		</div>
	</div>
</div>



<script type="text/javascript">
	var metadata = [ 'bizName', 'url','username','password' ];
	var projectId = $("#projectId").val();
	$(function() {
		loadData();
		$("#id_project_save").on('click', function() {
			save();
		});
		$("#id_project_next").on('click', function() {
			window.location.href = "tables.jsp?id=" + projectId;
		});
		$("#id_project_back").on('click', function() {
			window.location.href = "project.jsp?id=" + projectId;
		});
		
		var dbdiv = $("#new-db");

		$("#new_db_slaver").on("click", function() {
			$("#new-db").modal();
		});

		$("#doc-single-toggle_save").on("click", function() {
			var isVal = $('#id_from_db').validator('isFormValid');
			if (isVal) {
				$.post("mvc/db/add", {
					'jdbcUrl' : $("#dburl").val(),
					'username' : $("#username1").val(),
					'password' : $("#pwd1").val()
				}, function(data) {
					selectDb();
					closeDBDiv();
				});
			}
		});
	});
	function selectDb(c) {
		c = c || function() {
		};
		$.get("mvc/db/select?id=" + projectId, function(data) {
			resetSelect(data, "masterDb");
			resetSelect(data, "slaverDb");
			c();
		});
	}
	function resetSelect(data, id) {
		var selectObj = $("#" + id);
		selectObj.empty();
		for ( var _idx in data) {
			var _it = data[_idx];
			var tmp = '<option value="' + _it["id"] + '" selected>'
					+ _it['jdbcUrl'] + '</option>';
			selectObj.append(tmp);
		}
	}
	function closeDBDiv() {
		$("#new-db").modal("close");
	}

	function loadData() {
		selectDb(function () {
			$.get("mvc/biz/list?id=" + projectId, function(data) {
				data = eval("(" + data + ")");
				filltr(data);
			});
			$('#masterDb').selected('destroy');
			$('#slaverDb').selected('destroy');
			$('#slaverDb').selected();
			$('#masterDb').selected();
		});
		
	}

	function filltr(data) {
		data = data || [];
		$("#id_tb_body").html("");
		for ( var idx in data) {
			var context = "";
			var prj = data[idx];
			for ( var midx in metadata) {
				var key = metadata[midx];
				context += "<td>" + prj[key] + "</td>";
			}

			context += "<td>"
					+ '<a class="am-btn am-btn-default am-btn-xs am-hide-sm-only"  href="tables.jsp?id=' + 
					+ prj['id'] + '&projectId=' + '<%=id%>'
					+ '"><span class="am-icon-pencil-square-o"></span>编辑表</a>'
					
					+ '<a class="am-btn am-btn-default am-btn-xs am-hide-sm-only"  href="javascript:deleteprj('
					+ prj['id']
					+ ')"><span class="am-icon-trash-o"></span>删除</a>'

					+ "</td>";

			context += "<td></td>";
			context = "<tr>" + context + "</tr>";

			$("#id_tb_body").append(context);
		}
	}


	function deleteprj(id) {
		$.get("mvc/biz/delete?id=" + id, function(msg) {
			alert(msg);
			loadData();
		});
	}

	function save() {
		var isVal = $('#id_from').validator('isFormValid');
		if (!!isVal) {
			var obj = {
					'id': $("#id_id").val(),
				'bizName' : $("#bizName").val(),
				'masterDb' : $("#masterDb").val(),
				'slaverDb' : $("#slaverDb").val()
			};
			$.post("mvc/biz/add", obj, function() {
				alert("添加成功");
				$('#id_from')[0].reset();
				loadData();
			});
		}
	}
</script>

<%@include file="bottom.jsp"%>